<template>
	<view class="add-goods-content">
		<view class="main-wrap">
			<form class='loginView'>

				<view class="input-view">
					<view class="label-view">
						<text class="label">标题 </text>
					</view>
					<input 
					class="input"
					 v-model="goodsAddForm.name"
					 type="text" placeholder="请输入标题" />
				</view>

				<view class="input-view">
					<view class="label-view">
						<text class="label">分区</text>
					</view>
					<view class="input">
						<picker @change="categoryChange" 
						:value="categoryIndex" :range="categoryNameList">
							<view class="uni-input">{{categoryNameList[categoryIndex]}}</view>
						</picker>
					</view>
				</view>

				<view class="input-view">
					<view class="label-view">
						<text class="label">示图</text>
					</view>
					<uni-file-picker 
					limit="9" 
					@select='selectFile'
					file-mediatype="image"
					@delete='removeimage'
					title="最多选择9张图片"></uni-file-picker>
				</view>
				
				<view class="input-view">
					<view class="label-view">
						<text class="label">视频</text>
					</view>
					<uni-file-picker 
					limit="1" 
					@select='uploadVideo'
					file-mediatype="video"
					@delete='removeimage'
					title="视频文件">
					   <view v-if="videoSrcList.src">
					   	 <video
					   	  :src="videoSrcList.src">
					   	 </video>
					   </view>
					   <view v-else>
					   	   点击上传
					   </view>
					</uni-file-picker>
				</view>
				
				<view class="input-view">
					<view class="label-view">
						<text class="label">售价</text>
					</view>
					<input class="input" type="number" 
					color="red"
					 v-model="goodsAddForm.price"
					 placeholder="0.01" />
				</view>
				<view class="input-view">
					<view class="label-view">
						<text class="label">是否包邮</text>
					</view>
					<view class="input">
						<picker 
						@change="freightChange" 
						:value="freightIndex" :range="arrayFreight">
							<view class="uni-input">{{arrayFreight[freightIndex]}}</view>
						</picker>
					</view>
				</view>
				<view class="input-view">
					<view class="label-view">
						<text class="label">详情</text>
					</view>
					<view class="container">
						<editor id="editor" 
						class="ql-container" 
						v-model="goodsAddForm.detail"
						placeholder="请输入物品的富文本数据" 
						@ready="onEditorReady">
						</editor>
						<!-- <button type="warn" @tap="undo">撤销</button> -->
					</view>
				</view>
				<view class="button-view">
					<button @click="cancel" >撤销</button>
					<button @click="submitForm" class="submit" >提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import requests from "@/utils/requests.js"
	import { getCategoryListApi } from "@/http/category.js"
	import { addGoodsApi } from "@/http/goods.js"
	
	export default {
		data() {
			return {
				goodsAddForm:{
				    name:"",
					categoryId:null,
					categoryName:"",
					price:"0",
					detail:"",
					status:1,
					freight:0,
					bgImageList:[]
				},
				categoryList: [],
				categoryNameList: [],
				arrayFreight:["免运费","按距离计算"],
				categoryIndex: 0,
				freightIndex: 1,
				videoSrcList:{src:null}
			}
		},
		computed: {
		
		},
		onLoad() {
			this.getCategoryList();
		},
		methods: {
			/**
			 * 获取分类数据
			 */
			async getCategoryList(){
				const list =  await getCategoryListApi();
				if(list){
					this.categoryList = list;
					this.categoryNameList = list.map(item=>item.name);
				}
			},

			// 提交
			async submitForm() {
				// 校验表单
				if(!this.checkForm()){
					uni.showToast({
						title:"输入格式错误",
						icon:"none",
						duration:2000
					})
					return
				}
				
				this.goodsAddForm.categoryId = this.categoryList[this.categoryIndex].id;
				this.goodsAddForm.categoryName = this.categoryList[this.categoryIndex].name;
				this.goodsAddForm.freight = this.freightIndex;
				this.goodsAddForm.detail = this.goodsAddForm.detail.detail.html;
				// 校验
				const res = await addGoodsApi(this.goodsAddForm);
				if(res&&res.code===1){
					uni.navigateBack(1);
				}
			},
			// 撤销
			cancel(){
				uni.navigateBack(1);
			},
			
			// 校验表单
			checkForm(){
				// 基本数据
				if(this.goodsAddForm.name.length < 1) return false
				if(!this.goodsAddForm.price||this.goodsAddForm.price=='0') return false;
				if(!this.goodsAddForm.detail.detail.html) return false;
				
				if(!this.categoryList[this.categoryIndex].id) return false;
				if(this.goodsAddForm.bgImageList.length<1) return false;
				
				return true;
			},
			

			// picker
			categoryChange: function(e) {
				this.categoryIndex = e.detail.value
			},
			freightChange: function(e) {
				this.freightIndex = e.detail.value
			},
	
			// 富文本
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			
			// 图片上传
			selectFile(e) {
				const image_list = e.tempFilePaths;
				if (!image_list.length) return;
				image_list.forEach(async (path)=>{
					const res = await requests.pushFile('/common/upload', path)
					if (res.code === 1) {
						this.goodsAddForm.bgImageList.push({
							type:1,
							src:res.data,
							sort:1
						})
						uni.showToast({
							title: '上传成功'
						})
					} else {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 视频上传
			uploadVideo(){
				const image_list = e.tempFilePaths;
				if (!image_list.length) return;
				image_list.forEach(async (path)=>{
					const res = await requests.pushFile('/common/upload', path)
					if (res.code === 1) {
						// this.videoSrcList.push({
						// 	type:2, // 视频
						// 	src:res.data,
						// 	sort:1
						// })
						this.videoSrcList.src =res.data;
						uni.showToast({
							title: '上传成功'
						})
					} else {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 图片删除
			removeimage(e){
				console.log(e)
			},

		}
	}
</script>

<style lang="less" scoped>
	.add-goods-content {
		padding: 20rpx 30rpx;
		height: calc(100vh - 40rpx);
		background-color: #fbf9ec;

		.main-wrap {
			padding: 15rpx;
			background-color: #ffffff;

			.loginView {
				width: calc(100% - 30rpx);

				.input-view {
					width: calc(100% - 30rpx);
				}

				.button-view {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					width: calc(100% - 30rpx);
					button{
						width: 240rpx;
					}
					.submit{
						background-color: #5ca45b;
						color: #ffffff;
					}
				}
			}
		}
	}



	.container {
		padding: 10px;
		button {
				margin-top: 10px;
				width: calc( 100% -  40rpx);
			}
	}

	#editor {
		width: 100%;
		min-height: 300rpx;
		background-color: #ffffff;
	}
</style>